<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,
        ul,
        li {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .title {
            display: flex;
        }

        .title li {
            margin-right: 15px;
            cursor: pointer;
        }

        .title .active {
            color: red;
        }

        .content li {
            display: none;
        }

        .content .active {
            display: block !important;
        }
    </style>
</head>
<body>
    <div class="app">
        <ul class="title">
            <li  :class=" index == currentIndex ? 'active' : '' " v-for=" v,index in tabs" :key="index"   @click="currentIndex=index">
                 {{v.title}}
            </li>
        </ul>

        <ul class="content">
            <li v-for=" v,index in tabs" :key="index" :class="index == currentIndex ? 'active' : '' ">
                <p v-for=" i in v.content">
                    {{i.text}}
                </p>
            </li>
        </ul>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
    new Vue({
    el: '.app',
    data: {
        currentIndex: 0,
        tabs: [
            {
                id: 1,
                title: '社会',
                content: [
                    { text: '社会的内容1' },
                    { text: '社会的内容2' },
                    { text: '社会的内容3' }
                ]
            },
            {
                id: 2,
                title: '经济',
                content: [
                    { text: '经济 的内容1' },
                    { text: '经济 的内容2' },
                    { text: '经济 的内容3' },
                    { text: '经济 的内容4' },
                ]
            },
            {
                id: 3,
                title: '体育',
                content: [
                    { text: '体育 的内容1' },
                    { text: '体育 的内容2' }
                ]
            },
            {
                id: 4,
                title: '科技',
                content: [
                    { text: '科技 的内容1' },
                    { text: '科技 的内容2' },
                    { text: '科技 的内容3' },
                ]
            }
        ]
    },
    methods: {
        
    }
})
</script>
</html>